package ;

import easelhx.display.Bitmap;
import easelhx.display.Stage;
import easelhx.filters.BoxBlurFilter;
import easelhx.filters.ColorFilter;
import easelhx.filters.ColorMatrixFilter;
import easelhx.geom.Rectangle;
import easelhx.js.Image;
import js.HTMLCanvasElement;
import js.Lib;

/**
 * ...
 * @author 
 */

class FiltersExample implements IExample
{
	private var canvas:HTMLCanvasElement;
	private var stage:Stage;
	private var img:Image;
	
	public function new() 
	{
		canvas = cast Lib.document.getElementById("testCanvas");
		stage =  new Stage(canvas);
	}
	
	/* INTERFACE IExample */
	
	public function run():Void 
	{
		//wait for the image to load
		img = new Image();
		img.src = "assets/photo.jpg";
		img.onload = handleImageLoad;
	}
	
	private function handleImageLoad(event) {
		
		var bmp = new Bitmap(img);
		bmp.x = (canvas.width - 2 * img.width) / 3;
		bmp.y = (canvas.height - 2 * img.height) / 3;
		stage.addChild(bmp);
		
		var blurFilter:BoxBlurFilter = new BoxBlurFilter(32, 2, 2);
		var margins:Rectangle = blurFilter.getBounds();
		bmp = cast bmp.clone();
		bmp.filters = [blurFilter];
		//filters are only displayed when the display object is cached
		//later, you can call updateCache() to update changes to your filters
		bmp.cache(margins.x,margins.y,img.width+margins.width,img.height+margins.height);
		bmp.x += bmp.x + img.width;
		stage.addChild(bmp);
		
		var greyScaleFilter = new ColorMatrixFilter([
			0.33,0.33,0.33,0,0, // red
			0.33,0.33,0.33,0,0, // green
			0.33,0.33,0.33,0,0, // blue
			0,0,0,1,0  // alpha
		]);
		bmp = cast bmp.clone();
		bmp.filters = [greyScaleFilter];
		bmp.cache(0,0,img.width,img.height); // color filters don't change the bounds.
		bmp.y += bmp.y+img.height;
		stage.addChild(bmp);
		
		var removeRedFilter = new ColorFilter(0,1,1,1); // red, green, blue, alpha
		bmp = cast bmp.clone();
		bmp.filters = [removeRedFilter];
		bmp.cache(0,0,img.width,img.height); // color filters don't change the bounds.
		bmp.x = (canvas.width - 2 * img.width) / 3;
		stage.addChild(bmp);
		
		// draw to the canvas:
		stage.update();
	}
	
}